<template>
  <div class="num-layout">
    <div class="right box-border">
      <a-row :gutter="3" style="width: 100%">
        <a-col :span="12">
          <a-row>
            <p style="font-size: 18px">当天产出</p>
          </a-row>
          <a-row>
            <p style="font-size: 46px; color: #03ffff">0</p>
          </a-row>
          <a-row>
            <div class="horizontal-line"></div>
          </a-row>
          <a-row>
            <p style="font-size: 46px; color: #03ffff">0</p>
          </a-row>
          <a-row>
            <p style="font-size: 18px">当天计划</p>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <p style="font-size: 18px">完成率</p>
          </a-row>
          <a-row>
            <p style="font-size: 46px; color: #03ffff">0%</p>
          </a-row>

          <a-row>
            <p style="font-size: 46px; color: #03ffff">0%</p>
          </a-row>
          <a-row>
            <p style="font-size: 18px">合格率</p>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="less" scoped>
.one {
  color: #01c0ff;
}
.two {
  color: #ffa421;
}
.three {
  color: #39fb9e;
}
.four {
  color: #fa563b;
}
.horizontal-line {
  border-bottom: 3px solid #0389c6;
  width: 100%;
  margin: 0px 15px;
  height: 4px;
}
.num-layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 39%;
  .right {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .large {
      flex: 1;
      .px2font(30);
      // color: #68d8fe;
      /* color: #2de3f9; */
      margin-bottom: 2px;
    }

    .text {
      flex: 1;
      // color: #ccc;
      .px2font(14);
    }
  }
}
</style>
